﻿@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>

@{
    ViewBag.Title = "首页";
    Layout = "_LayoutPage.cshtml";
}

<div class="grid">
    <div>
        <div class="row">
            <div class="col-sm-12">
                <nav class="navbar navbar-toolbar" role="navigation">
                    <div class="container-fluid">
                        <div class="btn-toolbar" role="toolbar">
                            <div class="btn-group">
                                <a href="~/run_all" class="btn btn-success run_all">全部执行</a>
                                <a href="~/stop_all" class="btn btn-danger stop_all">全部停止</a>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>下次执行时间</th>
                        <th>运行耗时(毫秒)</th>
                        <th>状态</th>
                        <th>运行结果</th>
                        <th style="width: 150px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>@item.JobName</td>
                            <td>@item.NextTime</td>
                            <td>@item.TimeConsuming</td>
                            <td>
                                @if (!item.IsValidity)
                                {
                                    <span class="label label-danger">停止</span>
                                }
                                else if (item.IsRunning)
                                {
                                    <span class="label label-warning">执行中</span>
                                }
                                else
                                {
                                    <span class="label label-success">完成</span>
                                }
                            </td>
                            <td>
                                <p class="text-info" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" title="@item.ResultMsg">@item.ResultMsg</p>
                            </td>
                            <td>
                                <div class="btn-group btn-group-xs" role="group" aria-label="...">
                                    <a href="~/run?id=@item.JobId" class="btn btn-success run">执行</a>
                                    <a href="~/stop?id=@item.JobId" class="btn btn-danger stop">停止</a>
                                    <a href="~/info?id=@item.JobId" class="btn btn-info edit">编辑</a>
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="job_info">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">任务编辑</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">任务名称</label>
                                <div class="col-sm-10">
                                    <input type="hidden" id="jobId" name="JobId" />
                                    <input type="text" class="form-control" placeholder="任务名称" id="job_name" disabled="disabled">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">任务键值</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="任务键值" id="job_key" disabled="disabled">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">任务</label>
                                <div class="col-sm-10">
                                    <textarea id="job" class="form-control" placeholder="任务" disabled="disabled" style="resize:none"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">开始时间</label>
                                <div class="col-sm-10">
                                    <input type="text" name="NextTime" class="form-control" id="next_time" placeholder="开始日期时间" value="@DateTime.Now.ToString("yyyy/MM/dd HH:mm")">
                                    <span class="help-block">时间格式：@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">任务周期</label>
                                <div class="col-sm-10">
                                    <span style="padding-right:5px;padding-left:5px;">每</span>
                                    <input type="text" name="TimeSpan" class="form-control" id="timespan" value="1" style="width:45px;padding-right:5px; display:inline-block;" maxlength="2">
                                    <select name="JobType" id="job_type" class="form-control" style="width:50px;padding-right:5px; display:inline-block">
                                        <option value="1">天</option>
                                        <option value="2">周</option>
                                        <option value="3">月</option>
                                        <option value="5">年</option>
                                        <option value="6">小时</option>
                                        <option value="7">分钟</option>
                                        <option value="8">秒</option>
                                    </select>
                                    <span style="padding-right:5px;">发生一次</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Cron表达式</label>
                                <div class="col-sm-10">
                                    <input id="cron_expression" name="CronExpression" class="form-control" placeholder="Cron表达式" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="use_cron"> 使用Cron表达式执行任务
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save">保存并加入任务</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
    $(document).ready(function () {

        $(document).on("click", ".run_all", function () {
            $this = $(this);
            var url = $this.attr("href");
            $.post(url, function (result) {
                if (result.success) {
                    location.reload();
                    return;
                }
                alert(result.message);
            });
            return false;
        });

        $(document).on("click", ".stop_all", function () {
            $this = $(this);
            var url = $this.attr("href");
            $.post(url, function (result) {
                if (result.success) {
                    location.reload();
                    return;
                }
                alert(result.message);
            });
            return false;
        });

        $(document).on("click", ".run", function () {
            $this = $(this);
            var url = $this.attr("href");
            $.post(url, function (result) {
                if (result.success) {
                    location.reload();
                    return;
                }
                alert(result.message);
            });
            return false;
        });

        $(document).on("click", ".stop", function () {
            $this = $(this);
            var url = $this.attr("href");
            $.post(url, function (result) {
                if (result.success) {
                    location.reload();
                    return;
                }
                alert(result.message);
            });
            return false;
        });

        $(document).on("click", ".edit", function () {
            $this = $(this);
            var url = $this.attr("href");
            $.get(url, function (result) {
                var data = JSON.parse(result);
                $("#jobId").val(data.JobId);
                $("#job_name").val(data.JobName);
                $("#job_key").val(data.JobKey);
                $("#job").val(data.Assembly);
                $("#next_time").val(data.NextTime);
                $("#timespan").val(data.TimeSpan);
                $("#cron_expression").val(data.CronExpression);
                if (data.JobType == 9) {
                    $("#use_cron")[0].checked = true
                } else {
                    $("#job_type").val(data.JobType);
                    $("#use_cron")[0].checked = false
                }

                $('#job_info').modal({ "show": true, "backdrop": "static" });
            });
            return false;
        });

        $(document).on("click", "#save", function () {
            var data = {
                "JobId": $("#jobId").val(),
                "NextTime": $("#next_time").val(),
                "TimeSpan": $("#timespan").val(),
                "CronExpression": $("#cron_expression").val(),
                "JobType": $("#use_cron")[0].checked ? 9 : $("#job_type").val(),
            };
            var url = "@Url.Content("~/save")";
            $.post(url, data, function (result) {
                if (result.success) {
                    location.reload();
                    return;
                }
                alert(result.message);
            });
            return false;
        });
    });


</script>

